<script setup lang="ts">
import {ref} from "vue";
import { useRouter } from 'vue-router';
import FixedNav from "@/components/fixedNav/fixedNav.vue";
import Bottom from "@/components/bottom/bottom.vue";

const activeNav = ref('3') // 默认选中首页
const activeSubNav = ref('3-5')


// 定义路由的跳转
const router = useRouter();
const navigateTo = (path: string) => {
  router.push(path);
};
</script>

<template>
  <div class="mainContain">
    <fixed-nav v-model:active-nav="activeNav"
               v-model:active-sub-nav="activeSubNav"></fixed-nav>
    <div class="authorizeManageSection2">
      <img src="@/assets/images/authorizeManageTitle.png" class="authorizeManageTitle" alt="authorizeManageTitle">
      <span class="authorizeManagePoint authorizeManagePoint1"></span>
      <span class="authorizeManageContent authorizeManageContent1">商品授权</span>
      <span class="authorizeManagePoint authorizeManagePoint2"></span>
      <span class="authorizeManageContent authorizeManageContent2">IP授权</span>
      <span class="authorizeManagePoint authorizeManagePoint3"></span>
      <span class="authorizeManageContent authorizeManageContent3">图片授权</span>
      <span class="authorizeManagePoint authorizeManagePoint4"></span>
      <span class="authorizeManageContent authorizeManageContent4">品牌联名</span>
      <span class="authorizeManagePoint authorizeManagePoint5"></span>
      <span class="authorizeManageContent authorizeManageContent5">授权保护</span>
    </div>
    <div class="authorizeManageSection3">
      <span class="authorizeManageSection3Title">服务流程</span>
      <div class="authorizeService1"></div>
<!--      <img src="@/assets/images/authorizeService1.png" class="authorizeService1"-->
<!--           alt="authorizeService1">-->
      <div class="serviceStepContent serviceStepContent1">品牌管理</div>
      <div class="serviceStepContent serviceStepContent2">创新增值</div>
      <div class="serviceStepContent serviceStepContent3">确权布局</div>
      <div class="serviceStepContent serviceStepContent4">IP联名</div>
      <div class="serviceStepContent serviceStepContent5">授后服务</div>
      <div class="serviceStepContent serviceStepContent6">优质商家拓销</div>
      <div class="serviceStepContent serviceStepContent7">商品授权</div>
      <div class="serviceStepContent serviceStepContent8">IP/图片授权</div>
      <div class="serviceStepContent serviceStepContent9">专利授权</div>
      <div class="serviceStepContent serviceStepContent10">授权保护</div>
      <img src="@/assets/images/authorizeService2.png" class="authorizeService2"
           alt="authorizeService1">
      <span class="authorizeService2Text1">授权方</span>
      <img src="@/assets/images/authorizeService3.png" class="authorizeService3"
           alt="authorizeService1">
      <img src="@/assets/images/authorizeService3.png" class="authorizeService4"
           alt="authorizeService1">
      <img src="@/assets/images/authorizeService4.png" class="authorizeService5"
           alt="authorizeService1">
      <span class="authorizeService2Text2">被授权方</span>
      <div class="serviceBottom serviceBottom1">
        <div class="serviceBottomSub serviceBottomSub1">
          <span class="serviceBottomSubTitle serviceBottomSubTitle1">渠道溯源管理</span>
          <span class="serviceBottomSubContent serviceBottomSubContent1">
            真伪鉴定
            <br>
            暗码溯源
          </span>
        </div>
      </div>
      <div class="serviceBottom serviceBottom2">
        <div class="serviceBottomSub serviceBottomSub2">
          <span class="serviceBottomSubTitle serviceBottomSubTitle2">大数据服务</span>
          <span class="serviceBottomSubContent serviceBottomSubContent2">
            搜索推荐算法
            <br>
            AI图片标签
          </span>
        </div>
      </div>
      <div class="serviceBottom serviceBottom3">
        <div class="serviceBottomSub serviceBottomSub3">
          <span class="serviceBottomSubTitle serviceBottomSubTitle3">一键存证</span>
          <span class="serviceBottomSubContent serviceBottomSubContent3">
            时间戳存证
            <br>
            区块链存证
          </span>
        </div>
      </div>
      <div class="serviceBottom serviceBottom4">
        <div class="serviceBottomSub serviceBottomSub3">
          <span class="serviceBottomSubTitle serviceBottomSubTitle4">维权管控</span>
          <span class="serviceBottomSubContent serviceBottomSubContent4">
            全网检测
            <br>
            侵权打击
          </span>
        </div>
      </div>
    </div>


    <bottom/>
  </div>
</template>

<style scoped>
.mainContain {
  width: 1920px;
  margin: 0 auto;
  padding: 0;
  position: relative;
  left: -8px; /* 新增向左微调 */
  top: -8px;
  box-sizing: border-box; /* 新增盒模型计算方式 */
  background-color: #101010;
}


/** 中间内容 **/
.authorizeManageSection2 {
  width: 100%;
  height: 720px;
  background-image: url('@/assets/bk/authorizeManageSection1.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.authorizeManageTitle {
  position: absolute;
  top: 308px;
  left: 400px;
}

.authorizeManagePoint {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #FF6600;
  /* border: #FF6600 solid 1px; */
}

.authorizeManagePoint1 {
  position: absolute;
  top: 402px;
  left: 400px;
}

.authorizeManagePoint2 {
  position: absolute;
  top: 402px;
  left: 535px;
}

.authorizeManagePoint3 {
  position: absolute;
  top: 402px;
  left: 650px;
}

.authorizeManagePoint4 {
  position: absolute;
  top: 402px;
  left: 785px;
}

.authorizeManagePoint5 {
  position: absolute;
  top: 402px;
  left: 920px;
}


.authorizeManageContent {
  font-size: 20px;
  line-height: 28px;
  font-family: "Microsoft YaHei", sans-serif;
  color: #FFFFFF;
}

.authorizeManageContent1 {
  position: absolute;
  top: 394px;
  left: 424px;
}

.authorizeManageContent2 {
  position: absolute;
  top: 394px;
  left: 559px;
}

.authorizeManageContent3 {
  position: absolute;
  top: 394px;
  left: 674px;
}

.authorizeManageContent4 {
  position: absolute;
  top: 394px;
  left: 809px;
}

.authorizeManageContent5 {
  position: absolute;
  top: 394px;
  left: 944px;
}


.authorizeManageSection3 {
  width: 100%;
  height: 880px;
  background-image: url('@/assets/bk/authorizeManageSection2.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.authorizeManageSection3Title {

  font-family: "AlibabaPuHuiTi_2_105_Heavy", sans-serif;
  font-size: 40px;
  color: #FFFFFF;
  line-height: 56px;
  text-align: center;
  font-style: normal;
  position: absolute;
  top: 80px;
  left: 881px;
}

.authorizeService1 {
  width: 314px;
  height: 314px;
  position: absolute;
  top: 231px;
  left: 800px;
  /* border: #FF6600 solid 1px; */
  background-image: url('@/assets/images/authorizeService1.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.serviceStepContent{
  width: 220px;
  height: 64px;
  background: linear-gradient(90deg, #101010 0%, #371600 100%);
  box-shadow: 0px 0px 8px 2px rgba(255,102,0,0.6);
  border-radius: 38px;
  border: 2px solid #FF6600;
  color: #FFFFFF;
  font-size: 22px;
  line-height: 30px;
  font-family: "AlibabaPuHuiTi_2_105_Heavy", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}
.serviceStepContent1{
  position: absolute;
  top: 180px;
  left: 556px;
}
.serviceStepContent2{
  position: absolute;
  top: 268px;
  left: 556px;
}
.serviceStepContent3{
  position: absolute;
  top: 356px;
  left: 556px;
}
.serviceStepContent4{
  position: absolute;
  top: 444px;
  left: 556px;
}
.serviceStepContent5{
  position: absolute;
  top: 532px;
  left: 556px;
}
.serviceStepContent6{
  position: absolute;
  top: 180px;
  left: 1138px;
}
.serviceStepContent7{
  position: absolute;
  top: 268px;
  left: 1138px;
}
.serviceStepContent8{
  position: absolute;
  top: 356px;
  left: 1138px;
}
.serviceStepContent9{
  position: absolute;
  top: 444px;
  left: 1138px;
}
.serviceStepContent10{
  position: absolute;
  top: 532px;
  left: 1138px;
}
.authorizeService2 {
  position: absolute;
  top: 343px;  
  left: 360px; 
}
.authorizeService3 {
  position: absolute;
  top: 346px;  
  left: 468px; 
}
.authorizeService4 {
  position: absolute;
  top: 346px;  
  left: 1382px; 
}
.authorizeService5 {
  position: absolute;
  top: 343px;  
  left: 1478px; 
}
.authorizeService2Text1 {
  position: absolute;
  top: 444px;
  left: 374px;
  font-size: 20px;
  line-height: 28px;
  color: #FF6600;
  font-family: "AlibabaPuHuiTi_2_105_Heavy", sans-serif;
  text-align: center;
  font-style: normal;
}
.authorizeService2Text2 {
  position: absolute;
  top: 444px;
  left: 1479px;
  font-size: 20px;
  line-height: 28px;
  color: #FF6600;
  font-family: "AlibabaPuHuiTi_2_105_Heavy", sans-serif;
}
.serviceBottom {
  width: 286px;
  height: 180px;
  
}
.serviceBottom1 {
  background-image: url('@/assets/images/authorizeService5.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 640px;
  left: 360px;
}
.serviceBottom2 {
  background-image: url('@/assets/images/authorizeService6.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 640px;
  left: 665px;
}
.serviceBottom3 {
  background-image: url('@/assets/images/authorizeService7.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 640px;
  left: 969px;
}
.serviceBottom4 {
  background-image: url('@/assets/images/authorizeService8.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 640px;
  left: 1274px;
}
.serviceBottomSub{
  width: 286px;
  height: 137px;
  background: linear-gradient( 270deg, rgba(255,102,0,0) 0%, rgba(255,102,0,0.55) 45%, rgba(255,102,0,0.85) 64%, rgba(255,102,0,0.99) 100%, #FF6600 100%);
  border-radius: 0px 0px 8px 8px;
  position: absolute;
  top: 43px;
}
.serviceBottomSubTitle {
  font-family: "AlibabaPuHuiTi_2_85_Bold", sans-serif;
  font-size: 32px;
  color: #FFFFFF;
  line-height: 45px;
  text-align: left;
  font-style: normal;
  position: absolute;
  top: 12px;
  left: 16px;
}
.serviceBottomSubContent {
  width: 238px;
  height: 60px;
  font-family: "AlibabaPuHuiTi_2_55_Regular", sans-serif;
  font-size: 22px;
  color: #FFFFFF;
  line-height: 30px;
  text-align: left;
  font-style: normal;
  position: absolute;
  top: 61px;
  left: 17px;
}

</style>